<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
</head>
<script src="../vue-2.6.11.js"></script>
<body>
	<!-- 模板 -->

	<div id="app">
		
		<custom-component :count="count"></custom-component>

	</div>

	<script> 

		Vue.component('custom-component',{

			props:['count'],

			data:function (){
				return {
					incrementCount: this.count // 子组件中直接修改props会抛出错误，应该把props的值给data或computed，然后进行操作
				}
			},

			template:`
				<div>
					<h2>自定义组件</h2>
					<input type="button" value="改变count值" @click="changeCount" />
					{{ count}}
				</div>`,
			methods:{
				changeCount:function (){
					this.count++;
				}
			},

			/*computed:{
				incrementCount1:function (){
					var c=this.incrementCount
					return c;
				}
			}*/
		});

		//vm实例
		var vm = new Vue({

			el: '#app',

			data:{

				count:1
			}
	
		});

	</script>
</body>
</html>
</body>
</html>